<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>简单3D测试</title>
    <style>
        body {
            margin: 0;
            padding: 20px;
            background: #000;
            color: white;
            font-family: Arial, sans-serif;
        }
        #container {
            width: 100%;
            height: 500px;
            border: 2px solid #333;
            margin: 20px 0;
        }
        #info {
            background: #333;
            padding: 10px;
            border-radius: 5px;
            margin: 10px 0;
        }
    </style>
</head>
<body>
    <h1>3D库加载测试</h1>
    
    <div id="info">
        <h3>加载状态：</h3>
        <p id="three-status">检查Three.js...</p>
        <p id="gsap-status">检查GSAP...</p>
    </div>
    
    <div id="container"></div>
    
    <div id="info">
        <h3>说明：</h3>
        <p>如果看到旋转的绿色立方体，说明Three.js工作正常</p>
        <p>如果看到平滑的动画效果，说明GSAP工作正常</p>
    </div>

    <script src="js/three.min.js"></script>
    <script src="js/gsap.min.js"></script>
    <script>
        // 检查库是否加载
        const threeStatus = document.getElementById('three-status');
        const gsapStatus = document.getElementById('gsap-status');
        
        if (typeof THREE !== 'undefined') {
            threeStatus.textContent = '✅ Three.js 已加载 (版本: ' + THREE.REVISION + ')';
            threeStatus.style.color = 'green';
        } else {
            threeStatus.textContent = '❌ Three.js 未加载';
            threeStatus.style.color = 'red';
        }
        
        if (typeof gsap !== 'undefined') {
            gsapStatus.textContent = '✅ GSAP 已加载 (版本: ' + gsap.version + ')';
            gsapStatus.style.color = 'green';
        } else {
            gsapStatus.textContent = '❌ GSAP 未加载';
            gsapStatus.style.color = 'red';
        }
        
        // 如果Three.js加载成功，创建3D场景
        if (typeof THREE !== 'undefined') {
            console.log('开始创建3D场景...');
            
            // 创建场景
            const scene = new THREE.Scene();
            scene.background = new THREE.Color(0x87CEEB);
            
            // 创建相机
            const camera = new THREE.PerspectiveCamera(75, 800 / 500, 0.1, 1000);
            camera.position.z = 5;
            
            // 创建渲染器
            const renderer = new THREE.WebGLRenderer({ antialias: true });
            renderer.setSize(800, 500);
            renderer.shadowMap.enabled = true;
            renderer.shadowMap.type = THREE.PCFSoftShadowMap;
            
            // 添加到容器
            const container = document.getElementById('container');
            container.appendChild(renderer.domElement);
            
            // 创建立方体
            const geometry = new THREE.BoxGeometry(1, 1, 1);
            const material = new THREE.MeshLambertMaterial({ color: 0x00ff00 });
            const cube = new THREE.Mesh(geometry, material);
            cube.castShadow = true;
            scene.add(cube);
            
            // 添加光照
            const ambientLight = new THREE.AmbientLight(0x404040, 0.6);
            scene.add(ambientLight);
            
            const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
            directionalLight.position.set(5, 5, 5);
            directionalLight.castShadow = true;
            scene.add(directionalLight);
            
            // 创建地面
            const groundGeometry = new THREE.PlaneGeometry(20, 20);
            const groundMaterial = new THREE.MeshLambertMaterial({ color: 0x90EE90 });
            const ground = new THREE.Mesh(groundGeometry, groundMaterial);
            ground.rotation.x = -Math.PI / 2;
            ground.position.y = -2;
            ground.receiveShadow = true;
            scene.add(ground);
            
            console.log('3D场景创建完成');
            
            // 动画循环
            function animate() {
                requestAnimationFrame(animate);
                
                // 使用Three.js旋转
                cube.rotation.x += 0.01;
                cube.rotation.y += 0.01;
                
                renderer.render(scene, camera);
            }
            
            // 如果GSAP也加载成功，使用GSAP动画
            if (typeof gsap !== 'undefined') {
                console.log('使用GSAP创建动画...');
                
                // 使用GSAP创建更平滑的动画
                gsap.to(cube.rotation, {
                    duration: 2,
                    x: Math.PI * 2,
                    y: Math.PI * 2,
                    repeat: -1,
                    ease: "none"
                });
                
                // 添加颜色变化动画
                gsap.to(material.color, {
                    duration: 3,
                    r: 1,
                    g: 0,
                    b: 0,
                    repeat: -1,
                    yoyo: true,
                    ease: "power2.inOut"
                });
            }
            
            // 开始动画
            animate();
            console.log('动画循环已启动');
            
        } else {
            console.error('Three.js未加载，无法创建3D场景');
        }
    </script>
</body>
</html>
